<template>
  <div>
    <el-upload
      ref="upload"
      class="filter-item"
      action="#"
      :before-upload="beforeUpload"
      type="primary"
      :http-request="uploadOk"
      :on-change="uploadExcel"
      :show-file-list="false"
      :file-list="fileList"
      :limit="limitUpload"
      accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,application/vnd.ms-excel"
      :auto-upload="false"
    >
      <el-button type="primary" size="mini" icon="el-icon-bottom-right"
        >Excel导入</el-button
      >
    </el-upload>
  </div>
</template>

<script>
export default {
  data() {
    return {
      fileList: [], //上传的文件列表, 例如: [{name: 'food.jpg', url: 'https://xxx.cdn.com/xxx.jpg'}]
      limitUpload: 100, //允许上传次数（不刷新页面情况下）
    };
  },
  methods: {
    //上传前校验(其实如果在accept中限制了格式，这一步可有可无---)
    beforeUpload(file) {
      // 文件类型
      console.log(`上传前校验---`, file);
      const isType = file.type === "application/vnd.ms-excel";
      const isTypeComputer =
        file.type ===
        "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet";
      const fileType = isType || isTypeComputer;
      if (!fileType) {
        this.$message.error("上传文件只能是xls/xlsx格式！");
      }
      // 文件大小限制为2M
      const fileLimit = file.size / 1024 / 1024 < 2;
      if (!fileLimit) {
        this.$message.error("上传文件大小不超过2M！");
      }
      return fileType && fileLimit;
    },
    // 自定义上传（此方法我打印不出任何数据，注释了也不影响---）
    uploadOk(param) {
      // console.log(`上传成功---`, param)
      // const fileFormData = new FormData()
      // fileFormData.append('uploadFile', param.file)
      // console.log(`上传参数---`, param.file)
      // crudUser.uploadExcel(fileFormData).then(res => {
      //   console.log(`上传成功？？？---`, res)
      // })
    },
    // excel表上传（方法调用在此方法中）
    uploadExcel(file, fileList) {
      const fileTemp = file.raw;
      const fileName = file.raw.name;
      const fileType = fileName.substring(fileName.lastIndexOf(".") + 1);
      // 判断上传文件格式
      if (fileTemp) {
        if (fileType === "xlsx" || fileType === "xls") {
          const formData = new FormData(); //这一步不能变
          // 里面的第一个参数是我通过接口的方式需要返回给后端的参数
          // 又时候由于请求头的原因，需要在组件前面加上header属性
          formData.append("uploadFile", file.raw);
          console.log(formData);
          //   crudUser.uploadExcel(formData).then((res) => {
          //     //调用接口，传递参数。
          //     this.crud.refresh(); //这里是封装的刷新方法，可以无刷新更新页面数据
          //     this.$message({
          //       message: res, //这里是后端返回的提示文字---
          //       type: "success",
          //     });
          //   });
        } else {
          this.$message({
            type: "warning",
            message: "附件格式错误，请重新上传！",
          });
        }
      } else {
        this.$message({
          type: "warning",
          message: "请上传附件！",
        });
      }
    },
  },
};
</script>

<style>
</style>